{#{% for message in messages %}#}
{#    <style>#}
{#        .alert {#}
{#            font-family:  "黑体", system-ui;#}
{#            font-size: 1rem;#}
{#            text-align: center;#}
{#            width: 300px;#}
{#            height: 50px;#}
{#            background-color: #fff;#}
{#            opacity: 0;#}
{#            position: fixed;#}
{#            top: 20px;#}
{#            left: 50%;#}
{#            transform: translateX(-50%);#}
{#            z-index: 9999;#}
{#            padding: 10px;#}
{#            border-radius: 12px;#}
{#            transition: opacity 0.3s ease-in-out;#}
{#            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);#}
{##}
{#            display: flex;#}
{#            justify-content: center;#}
{#            align-items: center;#}
{#        }#}
{##}
{#        .alert.show {#}
{#            opacity: 1;#}
{#        }#}
{##}
{#        .alert-info {#}
{#            color: lightblue;#}
{#        }#}
{##}
{#        .alert-success {#}
{#            color: lightgreen;#}
{#        }#}
{##}
{#        .alert-warning {#}
{#            color: lightsalmon;#}
{#        }#}
{##}
{#        .alert-error {#}
{#            color: lightcoral;#}
{#        }#}
{#    </style>#}
{##}
{#    <script>#}
{#        document.addEventListener('DOMContentLoaded', function () {#}
{#            const messageAlerts = document.querySelectorAll('.message-alert');#}
{#            for (let i = 0; i < messageAlerts.length; i++) {#}
{#                const messageAlert = messageAlerts[i];#}
{#                messageAlert.classList.add('show');#}
{#                setTimeout(function () {#}
{#                    messageAlert.classList.remove('show');#}
{#                }, 2000);#}
{#            }#}
{#        });#}
{#    </script>#}
{##}
{#    <div class="alert alert-{{ message.tags }} message-alert">#}
{#        {% if message.tags == 'success' %}#}
{#            ✅#}
{#        {% elif message.tags == 'error' %}#}
{#            ❌#}
{#        {% elif message.tags == 'waring' %}#}
{#            ❗️#}
{#        {% else %}#}
{#            📚#}
{#        {% endif %}#}
{#        {{ message.tags }}#}
{#        {{ message }}#}
{#    </div>#}
{#{% endfor %}#}

<style>
    .alert {
        font-family: "黑体", system-ui;
        font-size: 1rem;
        text-align: center;
        width: 300px;
        height: 50px;
        background-color: #fff;
        opacity: 0;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        padding: 10px;
        border-radius: 12px;
        transition: opacity 0.3s ease-in-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .alert.show {
        opacity: 1;
    }

    .alert-info {
        color: lightblue;
    }

    .alert-success {
        color: lightgreen;
    }

    .alert-warning {
        color: lightsalmon;
    }

    .alert-error {
        color: lightcoral;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const messageAlerts = document.querySelectorAll('.message-alert');
        for (let i = 0; i < messageAlerts.length; i++) {
            const messageAlert = messageAlerts[i];
            messageAlert.classList.add('show');
            setTimeout(function () {
                messageAlert.classList.remove('show');
            }, 2000);
        }
    });

    const alertBox = document.createElement('div');
    alertBox.classList.add('alert message-alert');


    function alert_info(message) {
        alertBox.classList.add('alert-info');
        alertBox.innerText = message;

    }

    function alert_warn(message) {
        alertBox.classList.add('alert-warning');
        alertBox.innerText = message;

    }

    function alert_error(message) {
        alertBox.classList.add('alert-error');
        alertBox.innerText = message;

    }

    function alert_success(message) {
        alertBox.classList.add('alert-success');
        alertBox.innerText = message;

    }

    function my_alert(message, level) {
        // 创建alert框元素
        const alertBox = document.createElement('div');
        alertBox.classList.add('custom-alert');

        // 设置不同级别的样式
        if (level === 'info') {
            alertBox.classList.add('info');
        } else if (level === 'error') {
            alertBox.classList.add('error');
        } else if (level === 'warning') {
            alertBox.classList.add('warning');
        }

        // 显示消息内容
        alertBox.innerText = message;

        // 将alert框添加到页面中
        document.body.appendChild(alertBox);

    }


</script>
